import React, { memo } from 'react'

import PropTypes from 'prop-types'

import {
    HeaderWrapper
} from './style'

const WYThemeHeaderRcm = memo(function(props) {
    const { title, keywords } = props
    return (
      <HeaderWrapper className='sprite_02'>
        <div className='left'>
        <h3 className='title'>{title}</h3> 
        <div className='keyword'>
          {
            keywords.map((item, index) => {
              return (
                <div className='item' key={item}>
                  <a href='nothing'>{item}</a>
                  <span className='divider'>|</span>
                </div>
              )
            })
          }
        </div>
        </div>
        <div className='right'>
        <a href='nothing'>更 多</a> 
        <i className='icon sprite_02'></i>   
        </div> 
      </HeaderWrapper>
    )
})

WYThemeHeaderRcm.propTypes = {
  title: PropTypes.string.isRequired,
  keywords: PropTypes.array
}

WYThemeHeaderRcm.defaultProps = {
    keywords: []
}
export default WYThemeHeaderRcm